<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../day06/cssReset.css">
    <style>
        .flex {
            /*给一个高好让第一行和第二行中间能有缝隙*/
            height: 622px;
            /*定义流式布局*/
            display: flex;
            /*换行*/
            flex-wrap: wrap;
            /*项目两端对齐*/
            justify-content: space-between;
            /*交叉轴两端对齐*/
            align-content: space-between;
        }
        /*使用结构性伪类*/
        
        .flex>:nth-child(1) {
            width: 610px;
            height: 376px;
            background-color: red;
        }
        
        .flex>:nth-child(2) {
            width: 376px;
            height: 376px;
            background-color: blue;
        }
        
        .flex>:nth-child(3) {
            width: 366px;
            height: 234px;
            background-color: orange;
        }
        
        .flex>:nth-child(4) {
            width: 198px;
            height: 234px;
            background-color: rgb(106, 219, 140);
        }
        
        .flex>:nth-child(5) {
            width: 198px;
            height: 234px;
            background-color: rgb(145, 84, 214);
        }
        
        .flex>:nth-child(6) {
            width: 198px;
            height: 234px;
            background-color: rgb(12, 102, 20);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="center clearfix">
            <div class="flex">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

        </div>
    </div>
    </div>
</body>

</html>